// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

$border-width = $cs.xxs

left-border($color, $bg)
  background: linear-gradient(to right, $color, $color 5px, $bg 0px)

.notification
  left-border(var(--c-border-neutral-normal), transparent)
  border-top: 1px solid var(--c-border-neutral-extralight)
  border-right: 1px solid var(--c-border-neutral-extralight)
  border-color: var(--c-border-neutral-extralight)
  border-radius: $br.m
  margin-bottom: $ls.xxs
  box-shadow: 0 1px 1px 0 var(--c-bg-neutral-light)
  display: flex
  flex-wrap: wrap
  padding: 1px

  &.small
    border-left-width: $border-width

    .icon
      margin-right: $cs.m - $border-width
      margin-left: 0

    .container
      margin: $cs.s $cs.s $cs.s $cs.l

  &.with-details
    .container
      margin-right: 8rem

  &.error
    background: linear-gradient(to right, var(--c-border-error-normal), var(--c-border-error-normal) 5px, var(--c-bg-error-bold) 0px)
    border-top: 1px solid light-dark(var(--c-border-error-light), var(--c-border-error-extralight))
    border-right: 1px solid light-dark(var(--c-border-error-light), var(--c-border-error-extralight))
    border-bottom: 1px solid light-dark(var(--c-border-error-light), var(--c-border-error-extralight))
    border-color: light-dark(var(--c-border-error-light), var(--c-border-error-extralight))
    color: var(--c-text-error-normal-hover)

    &.dark
      background: linear-gradient(to right, var(--c-border-error-light), var(--c-border-error-light) 5px, var(--c-bg-error-heavy) 0px)

  &.warning
    left-border(var(--c-border-warning-light), var(--c-bg-warning-heavy))
    border-top: 1px solid var(--c-border-warning-extralight)
    border-right: 1px solid var(--c-border-warning-extralight)
    border-bottom: 1px solid var(--c-border-warning-extralight)
    border-color: var(--c-border-warning-extralight)
    color: var(--c-text-warning-normal-hover)

  &.info
    left-border(var(--c-text-brand-normal), var(--c-bg-info-heavy))
    border-top: 1px solid var(--c-border-info-extralight)
    border-right: 1px solid var(--c-border-info-extralight)
    border-bottom: 1px solid var(--c-border-info-extralight)
    border-color: var(--c-border-info-extralight)
    color: var(--c-text-brand-normal)

  &.success
    background: linear-gradient(to right, var(--c-border-success-normal), var(--c-border-success-normal) 5px, var(--c-bg-success-heavy) 0px)
    border-top: 1px solid var(--c-border-success-extralight)
    border-right: 1px solid var(--c-border-success-extralight)
    border-bottom: 1px solid var(--c-border-success-extralight)
    border-color: var(--c-border-success-extralight)
    color: var(--c-text-success-normal-hover)

    &.dark
      background: linear-gradient(to right, var(--c-border-success-light), var(--c-border-success-light) 5px, var(--c-bg-success-heavy) 0px)

  .message
    display: flex
    align-items: flex-start
    flex-direction: column
    gap: $cs.xs

  .title
    text-margin-bottom($cs.s)
    margin-top: 0
    font-weight: $fw.bold

  .content
    display: inline-block
    color: var(--c-text-neutral-heavy)

  .container
    display: flex
    margin: $cs.xl

  .icon
    flex-shrink: 0
    display: flex
    margin-right: $cs.xl - $border-width
    margin-left: $cs.m
    margin-top: .1rem
